<template>
  <div class="box p10">
    <div class="bg-white p10">
      <el-row :gutter="24">
        <el-col :span="4">
          <div class="mb10 level">
            <div class="left">
              <el-input type="text" size="small" placeholder="菜单标题"></el-input>
            </div>
            <div class="right">
              <el-button type="primary" size="small" icon="el-icon-search"></el-button>
            </div>
          </div>
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-col>
        <el-col :span="20">
          <div class="mb10 level">
            <div class="left">
              <el-input type="text" size="small" clearable placeholder="用户名"></el-input>
            </div>
            <div class="left ml15">
              <el-button type="primary" size="small" icon="el-icon-search">搜索</el-button>
            </div>
          </div>
          <el-table
              :data="orgs"
              border
              size="small"
              style="width: 100%">
            <el-table-column
                prop="title"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
</div>
</template>

<script>
export default {
  name: "SysOrg",
  setup(){
    return {
      currentPage4: 4,
      data: [{
        label: '甘肃建设一局',
        children: [{
          label: '甘肃建设北京分公司',
          children: [{
            label: '财务部'
          },{
            label: '人事部'
          },{
            label: '销售部'
          },{
            label: '后勤部'
          }]
        }]
      }, {
        label: '北京建设一局',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '大连建设一局',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      orgs:Array(10).fill({id:1,name:'马文成',userName:'用户名',nickName:'别名',email:'1605009393@qq.com',phone:'18501166419',address:'北京市通州区马驹桥镇香雪兰溪'})
    };
  }
}
</script>

<style scoped>

</style>
